import React from "react";
import { Table, Space, Button } from "antd";
import { EditOutlined, DeleteOutlined, EyeOutlined } from "@ant-design/icons";
import styles from "./CustomTable.module.css";

/**
 * 二次封装的Table组件
 * @param {Object} props - 组件属性
 * @param {Array} props.columns - 表格列配置
 * @param {Array} props.dataSource - 表格数据
 * @param {boolean} [props.showPagination=true] - 是否显示分页
 * @param {boolean} [props.showActionColumn=false] - 是否显示操作列
 * @param {Function} [props.onEdit] - 编辑回调
 * @param {Function} [props.onDelete] - 删除回调
 * @param {Function} [props.onView] - 查看回调
 * @param {Object} [props.pagination] - 分页配置（覆盖默认）
 * @param {Object} [props.otherProps] - 其他传递给Antd Table的属性
 */
const CustomTable = (props) => {
  const {
    columns,
    dataSource,
    showPagination = true,
    showActionColumn = false,
    onEdit,
    onDelete,
    onView,
    pagination,
    headerActions,
    ...otherProps
  } = props;

  // 处理操作列
  const handleActionColumn = () => {
    if (!showActionColumn) return [];
    return [
      {
        title: "操作",
        key: "action",
        fixed: "right",
        width: 180,
        render: (_, record) => (
          <Space size="middle">
            {onView && (
              <Button
                icon={<EyeOutlined />}
                size="small"
                onClick={() => onView(record)}
              >查看</Button>
            )}
            {onEdit && (
              <Button
                icon={<EditOutlined />}
                size="small"
                type="primary"
                onClick={() => onEdit(record)}
              >编辑</Button>
            )}
            {onDelete && (
              <Button
                icon={<DeleteOutlined />}
                size="small"
                type="primary"
                danger
                onClick={() => onDelete(record)}
              >删除</Button>
            )}
            
          </Space>
        ),
      },
    ];
  };

  // 合并列配置（原列 + 操作列）
  const mergedColumns = [...columns, ...handleActionColumn()];

  // 默认分页配置
  const defaultPagination = {
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total) => `共 ${total} 条数据`,
    pageSizeOptions: ["10", "20", "50", "100"],
    ...pagination,
  };

  return (
    <>
      {headerActions &&
        headerActions.map((action, index) => (
          <Button
            style={{ marginBottom: 12, marginRight: 12 }}
            key={index}
            onClick={action.onClick}
            type={action.type || ""}
            danger={action.danger}
            icon={action.icon} // 使用 icon 属性传入图标
          >
            {action.label}
          </Button>
        ))}

      <Table
        className={[styles.customTable, styles.animatedTable].join(" ")}
        columns={mergedColumns}
        dataSource={dataSource}
        pagination={showPagination ? defaultPagination : false}
        bordered
        scroll={{ x: "max-content" }}
        rowKey="id" // 默认使用id作为rowKey，可通过otherProps覆盖
        {...otherProps}
      />
    </>
  );
};

export default CustomTable;
